import React from 'react'
import { Col, Pagination, Row } from 'antd'
import { connect } from 'react-redux'
import VideoBox from './common/video-box'
import NavMenu from './common/nav-menu'
import { getVideoPageable } from '../actions/video'

class MoreVideosBody extends React.Component {
  state = {
    current:1
  }
  componentDidMount = () =>{
    const {current} = this.state
    this.props.getVideoPageable(current)
  }
  paginationChange = current => {
    this.setState({current},()=>{
      this.props.getVideoPageable(current)
    })
  }
  render () {
    const {videoPageable} = this.props
    const videos = videoPageable.content
    return <div>
      <NavMenu />

      <Row type='flex' gutter={40}>
        {
          videos.map(video => {
            return <Col span={6} className='margin-b-3'>
              <VideoBox video={video} />
            </Col>
          })
        }
      </Row>
      <Pagination defaultCurrent={1} total={videoPageable.totalElements}
                  hideOnSinglePage
                  defaultPageSize={12}
                  onChange={this.paginationChange}
                  className='pagination-center' />
    </div>
  }
}

const mapStateToProps = ({videoPageable}) => ({videoPageable})
const mapDispatchToProps = dispatch => ({
  getVideoPageable: current => dispatch(getVideoPageable(current))
})
export default connect(mapStateToProps, mapDispatchToProps)(MoreVideosBody)
